<script setup>
import { ref } from 'vue'
import { useBaiduMap } from '@/hooks/useBMap.js'
const mapOptions = {
  elementId: 'BMap',
  centerPoint: { lng: 116.514, lat: 39.915 },
  initialZoom: 10,
}
const { setNewZoom, getMapZoom } = useBaiduMap(mapOptions)

const zoomInput = ref('')

const setZoom = () => {
  setNewZoom(Number(zoomInput.value))
}

const showCurrentZoom = () => {
  const currentZoom = getMapZoom()
  alert(`Current Zoom Level: ${currentZoom}`)
}
</script>

<template>
  <div class="w-full h-full">
    <div id="BMap" class="w-full h-full"></div>
  </div>
</template>

<style scoped lang="scss"></style>
